<template>
  <div ref="chartRef" style="width:100%;height:100%"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
import radarData from '@/data/performanceRadarData.json'

const chartRef = ref()
let chart
let resizeTimer = null

const handleResize = () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    if (chart) {
      chart.resize()
    }
  }, 300)
}

const COLORS = {
  primary: '#00eaff',     // 与ChartLine一致的主题色
  secondary: '#ff4d6d',   // 高对比粉色
  grid: 'rgba(255, 255, 255, 0.1)',
  axis: 'rgba(255, 255, 255, 0.3)',
  text: '#e0e0e0'
}

const getChartOption = () => {
  const containerWidth = chartRef.value?.offsetWidth || 300
  const containerHeight = chartRef.value?.offsetHeight || 300
  const radius = Math.min(containerWidth, containerHeight) * 0.22

  return {
    title: { 
      text: radarData.title || '系统性能雷达图', 
      textStyle: { 
        color: '#00eaff',  // 保持与主题色一致
        fontSize: 16,     // 维持原有字号
        fontWeight: 'bold' // 关键修改：标题改为加粗
      },
      left: '10%',  
      top: '5%'
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(25, 25, 25, 0.9)',
      borderColor: COLORS.primary,
      borderWidth: 1,
      textStyle: { color: '#fff' },
      padding: 12,
      formatter: (params) => {
        return `${params.seriesName}<br/>${params.name}: ${params.value}/100`
      }
    },
    legend: {
      data: radarData.seriesData.map(item => item.name),
      right: '5%',  
      top: '10%',
      orient: 'vertical', 
      textStyle: { color: COLORS.text, fontSize: 12 },
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle'
    },
    radar: {
      center: ['50%', '55%'],
      radius: `${radius}%`,    
      indicator: radarData.indicator.map(item => ({
        ...item,
        nameTextStyle: { 
          color: COLORS.text, 
          fontSize: 12,
          ...(item.name === '兼容性' ? { bottom: -15 } : {}),
          ...(item.name === '安全性' ? { left: -15 } : {}),
          ...(item.name === '效率' ? { left: -15 } : {})
        }
      })),
      splitArea: {
        areaStyle: {
          color: [
            'rgba(54, 203, 203, 0.05)',
            'rgba(54, 203, 203, 0.08)',
            'rgba(54, 203, 203, 0.1)'
          ]
        }
      },
      axisLine: {
        lineStyle: { color: COLORS.axis, width: 1 }
      },
      splitLine: {
        lineStyle: { color: COLORS.grid, width: 1 }
      }
    },
    series: radarData.seriesData.map((item, index) => ({
      type: 'radar',
      name: item.name,
      symbol: 'circle',
      symbolSize: 4,  
      symbolBorderColor: '#fff',
      symbolBorderWidth: 1,
      lineStyle: {
        width: 1.8,   
        smooth: true,
        color: index === 0 ? COLORS.primary : COLORS.secondary
      },
      areaStyle: {
        color: index === 0 
          ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: `${COLORS.primary}70` },
              { offset: 1, color: `${COLORS.primary}10` }
            ])
          : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: `${COLORS.secondary}70` },
              { offset: 1, color: `${COLORS.secondary}10` }
            ])
      },
      data: [item.value]
    }))
  }
}

onMounted(() => {
  nextTick(() => {
    chart = echarts.init(chartRef.value)
    chart.setOption(getChartOption())
    window.addEventListener('resize', handleResize)
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  clearTimeout(resizeTimer)
  chart?.dispose()
})
</script>